<script setup>
import { useRouter } from "vue-router";
import { reactive, ref } from "vue";
import { Notification } from "@arco-design/web-vue";

import { useStore } from "../store";

const router = useRouter();
const store = useStore();
const isloading = ref(false);
const form = reactive({
  SecretId: "",
  SecretKey: "",
  Bucket: "",
  Region: "",
});

const loginBtnHandle = () => {
  console.log("游客模式登录");
  store.visit();
  router.replace({ path: "/home" });
};

const handleSubmit = (data) => {
  const { SecretId, SecretKey, Bucket, Region } = data.values;
  isloading.value = true;
  store
    .login(SecretId, SecretKey, Bucket, Region)
    .then(
      () => {
        router.replace({ path: "/home" });
      },
      () => {
        Notification.error("登录错误，请重试！");
      }
    )
    .finally(() => {
      isloading.value = false;
    });
};
</script>

<template>
  <div class="loginContainer">
    <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
      <a-form-item
        v-for="item in ['SecretId', 'SecretKey', 'Bucket', 'Region']"
        :field="item"
        :label="item"
        :rules="[{ required: true, message: `${item} is required` }]"
      >
        <a-input
          v-model="form[item]"
          :placeholder="`Please input ${item}...`"
        />
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit" type="primary" long :loading="isloading"
          >登录</a-button
        >
        <a-button type="outline" long @click="loginBtnHandle"
          >游客身份登录</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>

<style>
.loginContainer {
  width: 700px;
  height: max-content;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  padding-bottom: 200px;
  padding-right: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loginTitle {
  color: black;
}
</style>
